@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {    
  font-size: 62.5%;
  font-family: 'Raleway', sans-serif;
}
body{
  height: 100vh;
}
/*estilos generales*/
.container {
  display: grid; 
  grid-template-columns: auto; 
  grid-template-rows: auto; 
  gap: 1px;
  grid-template-areas: 
    "header"
    "main"
    "footer"; 
}
.header { grid-area: header; 
  display: flex;
  background-color: rgb(0, 30, 108);
  width: 100%;
  position: relative;
  background-image: url(../assets/imagenes/bk1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  justify-content: space-around;
  align-content: center;
  flex-wrap: wrap;
  align-items: center
}
.header__div__logo {
  display: flex;
  align-items: center;}
  .header__nav a, .footer__nav a{
    text-decoration: none;
    display: flex;
    justify-content: space-between; 
    color: inherit;
    font-size: 14px;}
    .header__nav li, .footer__nav li{
      display: inline-block;
      padding: 5px 10px;
      background-color: #e8630a64;
      border: 1px solid #e8ce0a64;
      text-align: center;
      color: #fff;
      margin: 5px;
    }
  .botonbuscar {
    display: flex;
    
  }

.header__titulo {
  text-transform: uppercase;
}
.footer { grid-area: footer; 
  background-color: #FCD900;
  
  width: 100%;
} 
.footer p{
  font-size: 18px;
}
/*estilos home*/
.main { grid-area: main;} 
  .main__home {
  
    width: 100%; height: 70%;
    
  }
  .main__section__actualizados, .main__section__h1 {
    
    margin: 0 auto;
    background-color: #035397;
  }
  
  .main__section__recomendados {
    background-color: #E8630A;
    display: flex;
    flex-direction: column;

  
  }
  .main__section__h1 {
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    float: none;
  }
  .titulorecomendados {
    display: flex;
    align-self: start;  }
  .recomendados__home {
    
    display: inline-flex;
    flex-direction: row; 
    justify-content: flex-end;
  }
  .cardhome {
    width: 15%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px #000;
    border-radius: 10px;
  }
  .cardhome img{
    width: 80%;
    
  }


  /*estilos manga*/
.main__manga{
  background-color: #035397;
  grid-area: main;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.main__manga__section {

  display:grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows :auto;
  gap:2%;
  margin:2%;

}
.card{
  width: 80%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 10px #000;
  border-radius: 10px;
}
.card img{
  width: 80%;
  
} 

  /*estilos anime*/
.main__anime {
  background-color: #035397;
  grid-area: main;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
  .main__manga__section {

    display:grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows :auto;
    gap:2%;
    margin:2%}

.box__anime{
  height: 100%;
  background-color: #035397;
  border-width: solid ; 
  border-color: aqua;
}
/*estilos contactos*/
.main__contacto {
  background-color: #035397;
  width: 100%;
  height: 80%;

}

.fondo__formulario {
  background-image: url("../assets/imagenes/bk2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height:100%;
  
  z-index: -1;
  background-color: rgba(0,0,0,0.5);
  
}
.caja__formulario{
  width: 50%;
 
  background-color: #035397;
  text-align: center;
  margin:0 auto;  
}

.formulario{
  padding:2px;
}

.formulario input , textarea {
  font-size: 1.5rem;
}
/*estilos registrate*/
.main__registrate {
  background-color: #035397;
  height: 80%;
  width: 100%; 
}
.fondoform__registrate {
  background-image: url("../assets/imagenes/bk2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
 
  
  z-index: -1;
  background-color: rgba(0,0,0,0.5);
  
}
.boxform__registrate{
  width: 50%;

  background-color: #035397;
  text-align: center;
  margin:0 auto;  
}
.formregistrate{
  padding:2px;
}
.formregistrate input , textarea {
  font-size: 1.5rem;
}


/*estilos productos*/
.main__productos {
  background-color: #035397;
  width: 100%; 
}
.main__productos__section__div_p  {
  font-size: larger;
  background-color: #035397;
  float: right;
}
.main___productos__section__div__iframe {
  display: flex;
  float: left;
  margin: 0 auto;
}